<template>
  <div class="m-add-spec">
    <div class="m-radios">
      <div class="radio-color">
        <w-radio :name="`type`" v-model="sepcType" :label="`0`" @input="onChangeRadio" :disabled="editColor">颜色</w-radio>
      </div>
      <div class="radio-size">
        <w-radio :name="`type`" v-model="sepcType" :label="`1`" @input="onChangeRadio" :disabled="editSize">尺码</w-radio>
      </div>
    </div>

    <!-- 规格列表 -->
    <div class="sepc-list">
      <w-table :columns="colorColumns" v-if="sepcType == '0'"></w-table>
      <w-table :columns="sizeColumns" v-else></w-table>

      <!-- 颜色新增列表 -->
      <div v-if="sepcType == '0'">
        <w-form-validate @on-validate="specSubmit">
          <div class="list clearfix" v-for="(color, colorIndex) in paramsInfo.valueList" :key="colorIndex">
            <div class="sepc-td input">
              <w-input rule="isEmpty|onlyInt" error="必填项|请输入数字" v-model="color.sequence"></w-input>
            </div>
            <div class="sepc-td">
              <div class="input">
                <w-input rule="isEmpty|isName" error="必填项|格式错误" v-model="color.specpropertyName"></w-input>
              </div>
            </div>
            <div class="sepc-td">
              <div class="color-picker">
                <colorPicker v-model="color.colorCode" @change="onChangeColor(colorIndex)"></colorPicker>
              </div>
            </div>
            <div class="sepc-td options">
              <div class="del">
                <span class="icon-del"></span>
                <span class="cur" @click="paramsInfo.valueList.splice(colorIndex, 1)">删除</span>
              </div>
            </div>
          </div>
          
          <!-- 新增按钮 -->
          <div class="add-new">
            <w-button type="option" @on-click="paramsInfo.valueList.push({'sequence': '', 'specpropertyName': '', 'colorCode': ''})">新增</w-button>
          </div>
          <div class="spec-submit">
            <button class="btn" type="submit">提交</button>
          </div>
        </w-form-validate>
      </div>

      <!-- 尺码新增列表 -->
      <div v-else>
        <w-form-validate @on-validate="specSubmit">
          <div class="list clearfix" v-for="(size, sizeIndex) in paramsInfo.valueList" :key="sizeIndex">
            <div class="sepc-td input">
              <w-input rule="isEmpty|onlyInt" error="必填项|请输入数字" v-model="size.sequence"></w-input>
            </div>
            <div class="sepc-td">
              <div class="input">
                <w-input rule="isEmpty|isName" error="必填项|格式错误" v-model="size.specpropertyName"></w-input>
              </div>
            </div>
            <div class="sepc-td">
              <div class="color-picker">
                <!-- <colorPicker v-model="size.sepc" @change="headleChangeColor"></colorPicker> -->
              </div>
            </div>
            <div class="sepc-td options">
              <div class="del cur" @click="paramsInfo.valueList.splice(sizeIndex, 1)">
                <span class="icon-del"></span>
                <span>删除</span>
              </div>
            </div>
          </div>
          
          <!-- 新增按钮 -->
          <div class="add-new">
            <w-button type="option" @on-click="paramsInfo.valueList.push({'sequence': '', 'specpropertyName': ''})">新增</w-button>
          </div>

          <div class="spec-submit">
            <button class="btn" type="submit">提交</button>
          </div>
        </w-form-validate>
      </div>
    </div>

    <!-- <div class="spec-submit">
      <w-button @on-click="specSubmit">提交</w-button>
    </div> -->
  </div>
</template>

<script>
import colorPicker from './components/colorPicker'
import { apiClassifyMange } from 'js/api'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      colorColumns: [
        // {title: '', width: '4%'},
        {title: '序号', width: '8%'},
        {title: '颜色', width: '30%'},
        {title: '规格值', width: '30%'},
        {title: '操作', width: '30%'}
      ],
      sizeColumns: [
        // {title: '', width: '4%'},
        {title: '序号', width: '8%'},
        {title: '尺码', width: '30%'},
        {title: '', width: '30%'},
        {title: '操作', width: '30%'}
      ],
      paramsInfo: {
        accessToken: this.$store.getters.token || '',
        threeMenuCode: this.$route.query.three || '',
        id: this.$route.query.id || '',
        name: '',
        valueList: [
          {
            specpropertyName: '',
            colorCode: '#000',
            sequence: ''
          }
        ]
      },
      editColor: false, // radio是否可以点击
      editSize: false, // radio是否可以点击
      sepcType: '0' // 规格类型，1：尺码；0：颜色
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  components: {
    colorPicker
  },
  created() {
    if (this.$route.query.id) {
      apiClassifyMange.apiGoodsSpecsUpdate(this.token, this.$route.query.three, this.$route.query.id).then(data => {
        const list = data.data.bean || {}
        this.paramsInfo.name = list.remarkName
        // 默认选中当前的修改规格
        if (this.paramsInfo.name == '尺码') {
          this.sepcType = '1'
          this.editColor = true
        } else if (this.paramsInfo.name == '颜色') {
          this.sepcType = '0'
          this.editSize = true
        }
        // 将glist数据重组
        this.paramsInfo.valueList = list.glist.map(v => {
          return {
            specpropertyName: v.value,
            colorCode: v.colorCode,
            sequence: v.sequence
          }
        })
      })
    }
  },
  methods: {
    /**
     * 选择颜色
     */
    onChangeColor(color, cIndex) {
      this.paramsInfo.valueList.forEach((v, index) => {
        if (index == cIndex) {
          v.colorCode = color
        }
      })
    },
    /**
     * 切换radio，清空数据
     */
    onChangeRadio(label) {
      this.paramsInfo.valueList.forEach(v => {
        v.specpropertyName = ''
        v.colorCode = ''
        v.sequence = ''
      })
    },
    /**
     * 提交
     */
    specSubmit() {
      const tip = this.paramsInfo.id ? '规格修改成功！' : '规格新增成功！'
      if (this.sepcType == '1') {
        this.paramsInfo.name = '尺码'
      } else if (this.sepcType == '0') {
        this.paramsInfo.name = '颜色'
      }
      apiClassifyMange.apiGoodsSpecsAdd(this.paramsInfo).then(data => {
        this.$toast(tip, () => {
          this.$router.push(`specifications?three=${this.$route.query.three}`)
        })
      })
    }
  }
}
</script>

<style lang="scss">
.m-add-spec {
  .sepc-list {
    .w-input .error-tip {
      margin-top: 0;
      margin-left: 80px;
      width: 60px
    }
  }
  .add-new {
    .btn {
      font-size: 12px;
      width: 70px;
    }
  }
  .spec-submit {
    .btn {
      width: 140px;
    }
  }
}
</style>

<style lang="scss" scoped>
@import '../../scss/_var.scss';
.m-add-spec {
  overflow: -webkit-paged-y;
}
.m-radios {
  margin: 24px 34px;
  font-size: 12px;
  div {
    display: inline-block;
  }
  .radio-size {
    margin-left: 30px;
  }
}
.sepc-list {
  .list {
    border: 1px solid $border-gray-light;
    border-top: none
  }
  .input {
    padding-left: 10px;
    vertical-align: middle;
  }
  .sepc-td {
    line-height: 50px;
    // height: 50px;
    display: inline-block;
    text-align: center;
    &:nth-child(1) {
      width: 8%
    }
    &:nth-child(2) {
      width: 30%
    }
    &:nth-child(3) {
      width: 30%
    }
    &:nth-child(4) {
      width: 30%
    }
  }
  .input {
    width: 40%;
    margin: 0 auto;
    vertical-align: middle;
  }
}
.add-new {
  margin: 20px 10px;
}
.color-picker {
  width: 100%;
  display: inline-block;
}
.spec-submit {
  margin: 40px 0;
  text-align: center
}
.options {
  display: inline-block;
  text-align: center;
  // & > div {
  //   display: inline-block;
  //   margin: 0 20px;
  //   cursor: pointer;
  // }
  .icon-del {
    display: inline-block;
    width: 12px;
    height: 12px;
    vertical-align: sub;
    background: url(../../assets/del-bush.png) no-repeat;
    cursor: pointer;
  }
}
</style>
